<template>
    <!--工具条-->
    <div style="overflow: hidden;">
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
          <el-form :inline="true" :model="filters">
              <el-form-item label="算式类别：">
                  <el-select v-model="filters.category" placeholder="请选择" @change="changeCategory">
                      <el-option v-for="item in options" :disabled="item.disabled" :key="item.value" :label="item.label"
                          :value="item.value">
                      </el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="最大数：">
                  <el-input-number v-model="filters.maximum" :disabled="numberDisabled" controls-position="right" :min="1" :max="100"></el-input-number>
              </el-form-item>
              <el-form-item label="题目数：">
                  <el-input-number v-model="filters.number" controls-position="right" :min="50" :max="100" :step="50"></el-input-number>
              </el-form-item>
              <el-form-item label="运算方式：">
                  <el-select v-model="filters.place" placeholder="请选择" @change="changePlace">
                      <el-option v-for="item in options2" :disabled="item.disabled" :key="item.value" :label="item.label"
                          :value="item.value">
                      </el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="生成份数：">
                  <el-input-number v-model="printNumber" controls-position="right" :min="1" :max="100"></el-input-number>
              </el-form-item>

              <el-form-item label="图纸背景：">
                  <!-- <el-select v-model="skin" placeholder="请选择" @change="changeSkin">
                      <el-option v-for="item in optionsSkin" :disabled="item.disabled" :key="item.value" :label="item.label"
                          :value="item.value">
                      </el-option>
                  </el-select> -->
                  <el-cascader
                    expand-trigger="hover"
                    :options="optionsSkin"
                    v-model="skin"
                    @change="changeSkin">
                  </el-cascader>
              </el-form-item>

              <el-form-item>
                  <el-button type="primary" icon="el-icon-document" @click="tapSubmit">生成题目</el-button>
              </el-form-item>
              <el-form-item>
                  <el-button type="success" icon="el-icon-printer" v-print="'#printTest'">打印</el-button>
              </el-form-item>
              <el-popover
                  placement="top-start"
                  title="说明"
                  width="200"
                  trigger="hover"
                  content="加法：和为最大数；减法：被减数为最大数，结果不为负数；乘法/除法：口诀表以内；">
                  <el-button slot="reference" icon="el-icon-question">说明</el-button>
              </el-popover>
              
          </el-form>
      </el-col>
    </div>
</template>

<script>
    import Bus from './bus.js'
    export default {
        name: 'tool',
        data() {
            return {
                filters: {
                    category: 0,
                    maximum: 20,
                    number: 50,
                    place: 0
                },
                numberDisabled: false,
                printNumber: 1,
                skin: [''],
                categoryName: '加法',
                placeName: '正算',
                options: [{
                    value: 0,
                    label: '加法'
                }, {
                    value: 1,
                    label: '减法'
                }, {
                    value: 2,
                    label: '加减混合'
                }, {
                    value: 3,
                    label: '乘法'
                }, {
                    value: 4,
                    label: '除法'
                }, {
                    value: 5,
                    label: '乘除混合'
                }, {
                    value: 6,
                    label: '四则混合'
                }],
                options2: [{
                    value: 0,
                    label: '正算'
                }, {
                    value: 1,
                    label: '逆算'
                }],
                optionsSkin: [{
                  value: '',
                  label: '默认-无背景'
                },{
                  value: 'kt',
                  label: '卡通',
                  children: [{
                    value: 'xiaoniao',
                    label: '小鸟'
                  },{
                    value: 'reqiqiu',
                    label: '热气球'
                  }]
                },{
                  value: 'zgf',
                  label: '中国风',
                  children: [{
                    value: 'hua',
                    label: '小花'
                  },{
                    value: 'bianpao',
                    label: '鞭炮'
                  }]
                }]

            }
        },

        methods: {
            tapSubmit() {
                var vm = this;
                var randomInt = function (nMin, nMax) {
                    return Math.floor(Math.random() * (nMax - nMin) + nMin + 0.5);
                };
                var randomOpt = function () {
                    var arr = ['+', '-', '*', '/'];
                    let cate = []
                    switch (vm.filters.category) {
                        case 2:
                            cate = [0, 1];
                            break;
                        case 3:
                            cate = [2];
                            break;
                        case 4:
                            cate = [3];
                            break;
                        case 5:
                            cate = [2, 3];
                            break;
                        case 6:
                            cate = [0, 1, 2, 3];
                            break;
                        default:
                            cate = [vm.filters.category];
                            break;
                    }
                    return arr[cate[Math.round(Math.random() * (cate.length - 1))]];
                };
                var getAnswer = function (question) {
                    var answer = null;
                    try {
                        answer = eval(question);
                    } catch (e) {}
                    return answer === null ? 'error' : answer;
                };
                var generateQuestion = function (difficulty) {
                    var question = '',
                        questionL, questionR, opt
                    questionL = randomInt(1, vm.filters.maximum);
                    questionR = randomInt(1, vm.filters.maximum);
                    opt = randomOpt()

                    // 加法规则
                    while (opt === '+' && questionL + questionR > vm.filters.maximum) {
                        questionL = randomInt(1, vm.filters.maximum);
                        questionR = randomInt(1, vm.filters.maximum);
                    }

                    // 减法规则
                    while (opt === '-' && (questionL > vm.filters.maximum  ||  questionL - questionR < 0) ) {
                        questionL = randomInt(1, vm.filters.maximum);
                        questionR = randomInt(1, vm.filters.maximum);
                    }

                    // 乘法规则
                    while (opt === '*' && (questionL > 9 || questionR > 9) ) {
                        // console.log(questionL,questionL > questionR)
                        questionL = randomInt(1, 9);
                        questionR = randomInt(1, 9);
                    }
                    

                    while (opt === '/' && ( questionR > 9 || (questionL / questionR > 9) || (questionL > 9 && questionR == 1 ) || (questionL % questionR !== 0 ))) {
                        // console.log(questionL,questionL > questionR)
                        questionL = randomInt(1, 81);
                        questionR = randomInt(1, 81);
                    }

                    return {
                        questionL: questionL,
                        opt: opt,
                        questionR: questionR,
                        answer: getAnswer(questionL + opt + questionR)
                    };
                };
                var getTesting = function () {
                    let newarr = [];
                    for (var j = 0; j < vm.printNumber; j++) {
                        let arr = []
                        for (let i = 0; i < vm.filters.number; i++) {
                            let testing = generateQuestion(2)
                            arr.push(testing)
                        }
                        newarr[j] = arr
                    }
                    return newarr
                }
                let testing = getTesting().map(item => {
                    let qa = item.map(item2 => {
                        if(item2.opt == '*') {
                            item2.opt = '×'
                        }
                        if(item2.opt == '/') {
                            item2.opt = '÷'
                        }
                        let name = ['questionL','questionR'];
                        if(vm.filters.place) {
                            item2[name[Math.round(Math.random() * (name.length - 1))]] = '(　)'
                        }else {
                            item2.answer = '　'
                        }
                        return item2
                    })
                    return qa
                })
                // console.log(testing)
                Bus.$emit('val', {
                    question: testing,
                    title: vm.categoryName,
                    place: vm.placeName,
                    skin: vm.skin
                })
            },
            changeCategory(val) {
                if(val >= 3 && val <= 5 ) {
                    this.numberDisabled = true
                }else {
                    this.numberDisabled = false
                }
                this.categoryName = this.options[val].label
            },
            changePlace(val) {
                this.placeName = this.options2[val].label
            },
            changeSkin(val){
              console.log(val)
            }
        },
        mounted() {

        }
    }
</script>

<style scoped>

</style>